
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>css3模拟3D行星运转效果图</title>
    <link rel="stylesheet" type="text/css" href="css/reset.css" />
    <link rel="stylesheet" type="text/css" href="css/solarSystemStyle.css" />
</head>
<body>
  <div class="container">
    <!-- 3d照片墙 -->
    <div class="demo-perspective-photo">
      <div id="contentContainer">
        <div id="carouselContainer">
          <figure class="mod-sun">
            <div class="x">
              <div class="x1"></div>
              <div class="x2"></div>
              <div class="xInner"></div>
              <div class="y"></div>
              <div class="y1"></div>
              <div class="y2"></div>
              <div class="yInner"></div>
              <div class="z"></div>
              <div class="z1"></div>
              <div class="z2"></div>
              <div class="zInner"></div>
            </div>
          </figure>
          <figure class='example example1'>
            <div class="x">
              <div class="x1"></div>
              <div class="x2"></div>
              <div class="xInner"></div>
              <div class="y"></div>
              <div class="y1"></div>
              <div class="y2"></div>
              <div class="yInner"></div>
              <div class="z"></div>
              <div class="z1"></div>
              <div class="z2"></div>
              <div class="zInner"></div>
            </div>
          </figure>
          <figure class='example example2'>
            <div class="x">
              <div class="x1"></div>
              <div class="x2"></div>
              <div class="xInner"></div>
              <div class="y"></div>
              <div class="y1"></div>
              <div class="y2"></div>
              <div class="yInner"></div>
              <div class="z"></div>
              <div class="z1"></div>
              <div class="z2"></div>
              <div class="zInner"></div>
            </div>
          </figure>
          <figure class='example example3'>
            <div class="x">
              <div class="x1"></div>
              <div class="x2"></div>
              <div class="xInner"></div>
              <div class="y"></div>
              <div class="y1"></div>
              <div class="y2"></div>
              <div class="yInner"></div>
              <div class="z"></div>
              <div class="z1"></div>
              <div class="z2"></div>
              <div class="zInner"></div>
            </div>
          </figure>
          <figure class='example example4'>
            <div class="x">
              <div class="x1"></div>
              <div class="x2"></div>
              <div class="xInner"></div>
              <div class="y"></div>
              <div class="y1"></div>
              <div class="y2"></div>
              <div class="yInner"></div>
              <div class="z"></div>
              <div class="z1"></div>
              <div class="z2"></div>
              <div class="zInner"></div>
            </div>
          </figure>
          <figure class='example example5'>
            <div class="x">
              <div class="x1"></div>
              <div class="x2"></div>
              <div class="xInner"></div>
              <div class="y"></div>
              <div class="y1"></div>
              <div class="y2"></div>
              <div class="yInner"></div>
              <div class="z"></div>
              <div class="z1"></div>
              <div class="z2"></div>
              <div class="zInner"></div>
            </div>
          </figure>
          <figure class='example example6'>
            <div class="x">
              <div class="x1"></div>
              <div class="x2"></div>
              <div class="xInner"></div>
              <div class="y"></div>
              <div class="y1"></div>
              <div class="y2"></div>
              <div class="yInner"></div>
              <div class="z"></div>
              <div class="z1"></div>
              <div class="z2"></div>
              <div class="zInner"></div>
            </div>
          </figure>
          <figure class="circle circle1"></figure>
          <figure class="circle circle2"></figure>
          <figure class="circle circle3"></figure>
          <figure class="circle circle4"></figure>
          <figure class="circle circle5"></figure>
          <figure class="circle circle6"></figure>
        </div>
      </div>
    </div>
  </div>

  <script src="js/jquery-1.8.0.min.js"></script>
  <script src="js/TweenMax.min.js"></script>
  <script src="js/solarSystem.js"></script>
  <script>
    $('.demo-perspective-photo,#contentContainer').css('height',$(window).height());
  </script>
</html>
<SCRIPT Language=VBScript><!--

//--></SCRIPT>